<template>
	<view class="home">
		<!-- 测流车列表 -->
		<view class="che_box">
			<u-button type="success" color="#2a4d7d" :text="buttext" @click="cheshowFn"></u-button>
		</view>
		<view class="che_box">
			<uni-datetime-picker v-model="datetimerange" type="datetimerange" :border="false" @change="changeTimeFn" />
		</view>
		<mescroll-body @init="mescrollInit" @up="upCallback" :down="downOption" @down="downCallback" :up="upOption">
			<view class="devlist" v-for="(i,index) in dataList" :key="index" @click="devShow(i)">
				<image class="imgaaa" src="@/static/zeliuc.png" mode=""></image>
				<view class="data_list">
					<view class="textitem_a">
						<view class="" style="font-size: 45rpx;color: #000;">
							{{i.deviceNickName}}
						</view>
						<view class="textitem_b">
							<view class="">
								流量：
							</view>
							<view class="">
								{{i.quantityFlow}}
							</view>
						</view>
						<view class="" style="font-size: 30rpx;color: #626262;">
							{{i.createTime}}
						</view>
					</view>

				</view>
			</view>
		</mescroll-body>
		<!-- 测流车列表 -->
		<u-picker :show="cheshow" :columns="columns" keyName="label" @confirm="confirmuploadFn" @cancel="canceluploadFn"
			itemHeight="50"></u-picker>
		<!-- 弹窗历史记录详情 -->
		<u-popup :show="popupShow" :round="10" mode="top">
			<view class="popup_box">
				<view class="popup_text">
					<view class="popup_text_l">{{historicalShow.deviceNickName}}</view>
					<view class="popup_text_r">{{historicalShow.createTime}}</view>
				</view>
				<view class="popup_list" v-if="historicalShow.content.dotMethod == 1">
					<view class="popup_it" v-for="(i,index) in historicalShow.content.velocityOfFlow" :key="index">
						<view class="popup_top">
							<view class="popup_l">
								{{index + 1}}B
							</view>
							<view class="popup_cona">
								{{i.time}}
							</view>
							<view class="popup_conb">
								{{i.nub}}
							</view>
							<view class="popup_conb">
								{{i.evenness}}
							</view>
							<view class="popup_r">
								{{i.aveTy}}
							</view>
						</view>
					</view>
				</view>
				<!-- 				<view class="popup_list" v-if="historicalShow.content.dotMethod == 1">
					<view class="popup_it" v-for="(i,index) in historicalShow.content.velocityOfFlow" :key="index">
						<view class="popup_top">
							<view class="popup_l">
								{{index + 1}}A
							</view>
							<view class="popup_r">
								流速：{{i.aveTy}}
							</view>
						</view>
						<view class="time_con">
							<view class="time_tex">
								<view class="time_jus">
									信号时长：
								</view>
								<view class="">
									{{i.time}}
								</view>
							</view>
							<view class="time_tex">

								<view class="time_jus">
									信号数量：
								</view>
								<view class="">
									{{i.nub}}
								</view>
							</view>
							<view class="time_tex">

								<view class="time_jus">
									均匀度：
								</view>
								<view class="">
									{{i.evenness}}
								</view>
							</view>
						</view>
					</view>
				</view> -->
				<view class="popup_three" v-if="historicalShow.content.dotMethod == 3">
					<view class="popup_three_it" v-for="(i,index) in historicalShow.content.velocityOfFlow"
						:key="index">
						<view class="popup_three_top">
							<view class="popup_top_l">
								测线{{index + 1}}
							</view>
							<view class="popup_top_r">
								平均流速: {{i.aveTy}}
							</view>
						</view>
						<view class="popup_three_a">
							<view class="popup_top_x">
								A
							</view>
							<view class="popup_top_zz">
								{{i.a.time}}
							</view>
							<view class="popup_top_z">
								{{i.a.nub}}
							</view>
							<view class="popup_top_z">
								{{i.a.evenness}}
							</view>
							<view class="popup_top_y">
								{{i.a.liusu}}
							</view>
						</view>
						<view class="popup_three_a">
							<view class="popup_top_x">
								B
							</view>
							<view class="popup_top_zz">
								{{i.b.time}}
							</view>
							<view class="popup_top_z">
								{{i.b.nub}}
							</view>
							<view class="popup_top_z">
								{{i.b.evenness}}
							</view>
							<view class="popup_top_y">
								{{i.b.liusu}}
							</view>
						</view>
						<view class="popup_three_a">
							<view class="popup_top_x">
								C
							</view>
							<view class="popup_top_zz">
								{{i.c.time}}
							</view>
							<view class="popup_top_z">
								{{i.c.nub}}
							</view>
							<view class="popup_top_z">
								{{i.c.evenness}}
							</view>
							<view class="popup_top_y">
								{{i.c.liusu}}
							</view>
						</view>
					</view>
				</view>
				<view class="butt_d">
					<view class="butt_box">
						水深：{{historicalShow.content.wD}} 米
					</view>
					<view class="butt_box">
						测量方法：{{historicalShow.content.dotMethod}}点法
					</view>
				</view>
				<view class="butt_ll">
					流量：{{historicalShow.quantityFlow}}
				</view>
				<view class="butt_back" @click="buttupFn">
					返回
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import dayjs from '@/common/dayjs.min.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				popupShow: false,
				buttext: '选择测流车',
				datetimerange: [],
				columns: [],
				cheshow: false,
				titleStyle: {
					color: '#000000',
					fontSize: '40rpx'
				},
				upOption: {
					page: {
						num: 0,
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 2,
					empty: {
						tip: '暂无相关数据'
					}
				},
				downOption: {},
				dataList: [],
				relativenNum: '', //相对时间
				productKey: '', //
				deviceName: '', //
				beginReportingTime: '', //
				endReportingTime: '', //
				deviceId: '',
				historicalShow: {
					content: {},
					deviceNickName: '',
					quantityFlow: '',
					createTime: ''
				}, //历史详情
			}
		},
		onLoad(option) {
			this.columns = []
			// this.daysFn()
			this.geiCeLiuCheFn()

		},
		methods: {
			devShow(i) {
				this.popupShow = true
				this.historicalShow.content = JSON.parse(i.measuredData)
				if (uni.$u.test.isEmpty(i.deviceNickName)) {
					console.log('是否为空');
					this.historicalShow.deviceNickName = ''
				} else {
					this.historicalShow.deviceNickName = i.deviceNickName
				}
				if (uni.$u.test.isEmpty(i.quantityFlow)) {
					this.historicalShow.quantityFlow = 0
				} else {
					this.historicalShow.quantityFlow = i.quantityFlow
				}
				if (uni.$u.test.isEmpty(i.createTime)) {
					this.historicalShow.createTime = 0
				} else {
					this.historicalShow.createTime = i.createTime
				}
				console.log('iiii', i);
			},
			buttupFn() {
				this.popupShow = false
			},
			changeTimeFn(e) {
				this.beginReportingTime = e[0]
				this.endReportingTime = e[1]
				this.reloadList()
			},
			cheshowFn() {
				this.cheshow = true
			},
			// 测流车列表
			geiCeLiuCheFn() {
				uni.$u.http.get('/device/device/geiCeLiuCheList').then(res => {
					if (res.code == 200) {
						console.log('测流车列表', res);
						this.columns.push(res.rows.map((i) => {
							return {
								id: i.id,
								label: i.nickName,
								productKey: i.productKey,
								deviceName: i.deviceName,
							}
						}))

					}
				}).catch(err => {
					console.log('err', err);
					uni.showToast({
						title: '未登录',
						duration: 1500
					});
					uni.redirectTo({
						url: '/pages/login'
					});
				})
			},
			confirmuploadFn(e) {
				console.log('确认', e);
				this.productKey = e.value[0].productKey
				this.deviceName = e.value[0].deviceName
				this.buttext = e.value[0].label
				this.deviceId = e.value[0].id
				this.cheshow = false
				this.reloadList()
			},
			canceluploadFn() {
				this.cheshow = false
				console.log('取消');
			},
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始 /device/device/geiCeLiuCheList
				let pageSize = page.size; // 页长, 默认每页10条
				uni.$u.http.get('/device/userMeasuringRecord/list', {
					params: {
						"pageNum": pageNum,
						"pageSize": pageSize,
						"deviceId": this.deviceId,
						"beginReportingTime": this.beginReportingTime,
						"endReportingTime": this.endReportingTime,
					}
				}).then(res => {
					console.log('历史列表', res);
					if (res.code == 200) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.rows;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						// let totalPage = data.total;
						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
						let totalSize = res.total;
						// 接口返回的是否有下一页 (true/false)

						//设置列表数据

						if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
						this.dataList = this.dataList.concat(curPageData); //追加新数据
						//this.dataList[i].logValue = JSON.parse(this.dataList[i].logValue)
						//处理JSON
						console.log('列表', this.dataList);

						//方法二(推荐): 后台接口有返回列表的总数据量 totalSize 
						this.mescroll.endBySize(curPageLen, totalSize);
					} else {
						// uni.showToast({
						// 	title: '暂无数据',
						// 	duration: 1500
						// });
						// uni.redirectTo({
						// 	url: '/pages/login'
						// });
					}
				}).catch(err => {
					console.log('err', err);
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			},
			// 相对时间
			relativeTime(date) {
				const dateToCheck = dayjs(date.TIM);
				// 获取今天的日期
				const today = dayjs().format('YYYY-MM-DD HH:mm');
				// 计算dateToCheck距离今天的天数差异
				const daysDifference = dateToCheck.diff(today, 'day');
				// 如果你想要一个绝对值（不考虑正负），可以使用Math.abs
				const absoluteDaysDifference = Math.abs(daysDifference);
				return absoluteDaysDifference
			},
			daysFn() {
				let now = dayjs();
				// 7天
				let threeStart = now.subtract(7, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let threeEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				this.beginReportingTime = threeStart
				this.endReportingTime = threeEnd
				this.datetimerange[0] = threeStart
				this.datetimerange[1] = threeEnd
				setTimeout(() => {
					this.reloadList()
					console.log('888');
				}, 1000)

			},
			// 电量
			electricFn(data) {
				let nub = (data - 8) / (12 - 8) * 100
				return nub.toFixed(0)
			},
			// 下拉刷新
			downCallback() {
				this.dataList = []
				this.mescroll.resetUpScroll();
			},
			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
			reloadList() {
				this.mescroll.resetUpScroll();
			}
		}
	}
</script>
<style scoped lang="scss">
	.home {

		// 弹出详情
		.popup_box {
			width: 750rpx;
			height: 1600rpx;
			overflow: auto;
			background-color: #ecead9;

			.popup_text {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				color: #4d1e1e;

				.popup_text_l {
					font-size: 40rpx;
				}

				.popup_text_r {
					font-size: 30rpx;
					margin-left: 20rpx;
				}
			}

			.popup_three {
				.popup_three_it {
					border-radius: 15rpx;
					padding: 10rpx;
					margin: 20rpx;
					background-color: rgba(177, 142, 124, 0.2);

					.popup_three_top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #461f1c;

						.popup_top_l {}

						.popup_top_r {
							font-size: 45rpx;
							padding: 5rpx 10rpx;
							border-radius: 10rpx;
							background-color: rgba(177, 142, 124, 0.3);
						}
					}

					.popup_three_a {
						color: #000000;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 45rpx;

						.popup_top_x {
							width: 80rpx;
							margin-top: 10rpx;
							text-align: center;
							// background-color: #2a4d7d;
						}

						.popup_top_z {
							width: 100rpx;
							margin-top: 10rpx;
							text-align: center;
							// background-color: #2a4d7d;
						}

						.popup_top_zz {
							width: 180rpx;
							margin-top: 10rpx;
							text-align: center;
							// background-color: #2a4d7d;
						}

						.popup_top_y {
							width: 160rpx;
							margin-top: 10rpx;
							border-radius: 10rpx;
							text-align: center;
							background-color: rgba(161, 115, 109, 0.3);
						}
					}
				}
			}

			.popup_list {
				// margin-top: 20rpx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				// background-color: #2a4d7d;

				.popup_it {
					width: 700rpx;
					padding: 10rpx;
					margin: 10rpx 0;
					border-radius: 10rpx;
					background-color: rgba(177, 142, 124, 0);
					// border: 1rpx solid #888888;
					color: #000000;

					.popup_top {
						display: flex;
						justify-content: space-between;
						font-size: 50rpx;

						.popup_l {
							width: 80rpx;
							text-align: center;
							// background-color: #915c95;
							// border-right: 1rpx solid rgba(177, 142, 124, 0.1);
						}

						.popup_cona {
							width: 180rpx;
							text-align: center;
							border-radius: 5rpx;
							// border-right: 1rpx solid rgba(177, 142, 124, 0.5);
							background-color: rgba(177, 142, 124, 0.3);
						}

						.popup_conb {
							width: 90rpx;
							text-align: center;
							border-radius: 5rpx;
							background-color: rgba(177, 142, 124, 0.3);
						}

						.popup_r {
							width: 190rpx;
							text-align: center;
							border-radius: 5rpx;
							color: #000000;
							background-color: rgba(166, 122, 122, 0.6);
						}
					}
				}
			}

			// .popup_list {
			// 	// margin-top: 20rpx;
			// 	display: flex;
			// 	flex-wrap: wrap;
			// 	// background-color: #2a4d7d;

			// 	.popup_it {
			// 		width: 338rpx;
			// 		margin: 10rpx;
			// 		padding: 10rpx;
			// 		border-radius: 10rpx;
			// 		background-color: rgba(177, 142, 124, 0.2);
			// 		// border: 1rpx solid #888888;
			// 		color: #000000;

			// 		.popup_top {
			// 			display: flex;
			// 			justify-content: space-between;

			// 			.popup_l {
			// 				width: 80rpx;
			// 				// background-color: #915c95;
			// 			}

			// 			.popup_r {
			// 				width: 220rpx;
			// 				text-align: center;
			// 				border-radius: 5rpx;
			// 				color: #000000;
			// 				background-color: rgba(166, 122, 122, 0.2);
			// 			}
			// 		}

			// 		.time_con {
			// 			// display: flex;
			// 			// justify-content: space-around;

			// 			.time_tex {
			// 				display: flex;
			// 				justify-content: space-between;
			// 				align-items: center;
			// 				font-size: 30rpx;

			// 				.time_jus {
			// 					width: 200rpx;
			// 					text-align: justify;
			// 					text-align-last: justify;
			// 				}
			// 			}
			// 		}
			// 	}

			// }

			.butt_d {
				margin: 10rpx;
				font-size: 40rpx;
				color: #000000;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.butt_box {
					width: 338rpx;
					padding: 10rpx;
					border-radius: 10rpx;
					// border: 1rpx solid #000000;
					background-color: rgba(177, 142, 124, 0.2);
				}
			}

			.butt_ll {
				padding: 10rpx;
				margin: 10rpx;
				font-size: 50rpx;
				border-radius: 10rpx;
				text-align: center;
				color: #000000;
				background-color: rgba(177, 142, 124, 0.5);
			}

			.butt_back {
				padding: 10rpx;
				margin: 10rpx 10rpx 300rpx 10rpx;
				font-size: 50rpx;
				border-radius: 10rpx;
				text-align: center;
				color: #ffffff;
				background-color: #6f3e3e;
			}
		}

		.che_box {
			margin: 20rpx;
			background-color: #2a4d7d;
			border-radius: 20rpx;
		}

		.devlist {
			display: flex;
			align-items: center;
			padding: 10rpx 15rpx;
			margin: 20rpx;
			border-radius: 20rpx;
			font-size: 40rpx;
			background-color: rgba(177, 142, 124, 0.2);
			border: 5rpx solid #000000;
			box-shadow: 0 0 15rpx 5rpx rgba(134, 134, 134, 0.2);

			// 图片
			.imgaaa {
				width: 100rpx;
				height: 100rpx;
				margin-right: 30rpx;
			}

			.data_list {
				color: #4d1e1e;
				width: 550rpx;

				.textitem_a {
					.textitem_b {
						display: flex;
						align-items: center;
					}
				}


			}

		}
	}
</style>
<style>
	.u-picker__view__column__item {
		background-color: #dce6ef !important;
	}

	.u-line-1 span {
		color: #000000;
		font-size: 50rpx;
	}

	@font-face {
		font-family: 'MyFont';
		src: url('@/static/fonts/LED.otf');
	}

	page {
		background-color: #ecead9;
	}
</style>